<template>
	<view>
		<view class="head">
			<view class="head-left">
				<view class="text1">
					计算公式
				</view>
				<view class="text2">
					指数=总价/使用天数
				</view>
			</view>
			<view class="head-right">
				<view class="type">
					范例
				</view>
				<view class="text">
					<view class="">
						购入价格:
					</view>
					<view class="">
						<text>7000</text>元
					</view>
				</view>
				<view class="text">
					<view class="">
						服役时间:
					</view>
					<view class="">
						<text>700</text>天
					</view>
				</view>
				<view class="text">
					<view class="">
						日均价格:
					</view>
					<view class="">
						<text>10</text>元/天
					</view>
				</view>
			</view>
		</view>


		<view class="container">
			<view class="title">
				参考标准
			</view>
			<view class="cont">
				<view class="contsItem">
					<view class="text">
						消费档次
					</view>
					<view v-for="(item,index) in data1" :key="index">
						<view class="item" :style="{background: item.color}">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="contsItem">
					<view class="text">
						标准/日均
					</view>
					<view v-for="(item,index) in data2" :key="index">
						<view class="item" :style="{background: item.color}">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data1: [],
				data2: [],
				bkcolor: ['#CCCCCC', '#66CB01', '#299FE9', '#FAC800', '#9556F3']
			};
		},
		onShow() {
			if (uni.getStorageSync('user_token')) {
				this.getData()
			}
		},
		methods: {
			getData() {
				this.data1 = []
				this.data2 = []
				this.$api.formulaApi({}).then(res => {
					if (res.code == 1 && res.result.length > 0) {
						res.result.forEach((item, index) => {
							this.data1.push({
								id: index,
								name: item.name,
								color: this.bkcolor[index]
							})
							this.data2.push({
								id: index,
								name: item.content,
								color: this.bkcolor[index]
							})
						})

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		height: 220px;
		background: linear-gradient(to bottom, #91A1EF, #637BE9);
		display: flex;
		align-items: center;
		justify-content: space-around;

		&-left {
			.text1 {
				font-family: Roboto, Roboto;
				font-weight: 500;
				font-size: 21px;
				color: #FFFFFF;
				margin-bottom: 20px;
			}

			.text2 {
				font-family: Poppins, Poppins;
				font-weight: 400;
				font-size: 17px;
				color: #FFFFFF;
			}
		}

		&-right {
			width: 185px;
			height: 131px;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 6px 6px 6px 6px;
			position: relative;

			.type {
				position: absolute;
				top: 0%;
				left: 0%;
				width: 62px;
				height: 22px;
				line-height: 22px;
				background: linear-gradient(270deg, #637BE9 50%, #6980EA 58%, #91A1EF 100%);
				border-radius: 6px 0px 6px 0px;

				font-family: Roboto, Roboto;
				font-weight: 500;
				font-size: 10px;
				color: #FFFFFF;
				text-align: center;
			}

			.text:nth-child(2) {
				margin: 30px 0 10px 0;
			}

			.text:nth-child(3) {
				margin: 10px 0 10px 0;
			}

			.text {
				padding: 0 20px;
				font-family: Poppins, Poppins;
				font-weight: 400;
				font-size: 14px;
				color: #FFFFFF;
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.container {
		// background: #F8F9F9;
		padding: 0 20px;

		.title {
			font-family: Roboto, Roboto;
			font-weight: 500;
			font-size: 16px;
			color: #5E5E5E;
			margin: 20px 0;
		}

		.cont {
			background: #FFFFFF;
			border-radius: 6px 6px 6px 6px;
			display: flex;
			justify-content: space-between;
			padding: 20px 15px;

			.line {
				border-right: 1px solid #D8D8D8;
			}

			.contsItem {
				.text {
					text-align: center;
					font-family: Roboto, Roboto;
					font-weight: 500;
					font-size: 16px;
					color: #5E5E5E;
				}

				.item {
					width: 141px;
					height: 28px;
					border-radius: 3px 3px 3px 3px;
					text-align: center;
					line-height: 28px;
					margin: 20px 0;
				}
			}
		}
	}
</style>